<template>
	<cl-dialog
		v-model="visible"
		class="tongkang-refund-exchange"
		width="90%"
		:close-on-click-modal="false"
	>
		<el-card shadow="never">
			<template #header>
				<div class="card-header">
					<span>镜片订单退换货</span>
				</div>
			</template>

			<el-form
				:model="formData"
				:rules="rules"
				ref="formRef"
				label-width="120px"
				size="default"
				:show-message="false"
			>
				<!-- 订单基本信息 -->
				<el-divider content-position="left">订单基本信息</el-divider>
				<el-row>
					<el-col :span="12">
						<el-form-item label="订单编号">
							<el-input
								v-model="orderData.order_no"
								readonly
								style="background-color: #f5f7fa"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="下单时间">
							<el-input
								v-model="orderData.shopOrderTime"
								readonly
								style="background-color: #f5f7fa"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户名">
							<el-input
								v-model="remarkObj.userName"
								readonly
								style="background-color: #f5f7fa"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="眼镜品牌">
							<el-input
								v-model="remarkObj.brand"
								readonly
								style="background-color: #f5f7fa"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="收货人">
							<el-input
								v-model="orderData.contactName"
								readonly
								style="background-color: #f5f7fa"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话">
							<el-input
								v-model="orderData.contactPhone"
								readonly
								style="background-color: #f5f7fa"
							/>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 步骤条 -->
				<el-steps :active="currentStep" class="steps-margin">
					<el-step title="选择类型" />
					<el-step title="选择原因" />
					<el-step title="提交申请" />
				</el-steps>

				<!-- 步骤1：选择类型 -->
				<template v-if="currentStep === 0">
					<el-divider content-position="left">请选择服务类型</el-divider>
					<el-row>
						<el-col :span="24">
							<el-form-item label="" prop="refundType" required>
								<div class="refund-type-options">
									<div
										class="option-card"
										:class="{ 'option-selected': formData.refundType === 1 }"
										@click="changeRefundType(1)"
									>
										<div class="option-icon">
											<div class="icon-circle">
												<el-icon><refresh-left /></el-icon>
											</div>
										</div>
										<div class="option-text">
											<h4>退货</h4>
											<p>退回商品并申请退款</p>
										</div>
									</div>

									<div
										class="option-card"
										:class="{ 'option-selected': formData.refundType === 2 }"
										@click="changeRefundType(2)"
									>
										<div class="option-icon">
											<div class="icon-circle">
												<!-- <el-icon><Switch /></el-icon> -->
												<el-icon><sort /></el-icon>
											</div>
										</div>
										<div class="option-text">
											<h4>换货</h4>
											<p>更换商品或调整规格</p>
										</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</template>

				<!-- 步骤2：填写信息 -->
				<template v-else-if="currentStep === 1">
					<el-divider content-position="left">退换货信息</el-divider>
					<el-row>
						<el-text class="mx-1" size="small">请选择一级原因分类</el-text>
						<el-col :span="24">
							<el-form-item label="" prop="reasonRadio" required>
								<el-radio-group v-model="formData.reasonRadio">
									<el-radio
										v-for="value in options.reasonStatus"
										:key="value.value"
										:value="value.value"
										size="large"
										@change="handleReasonChange(value)"
										border
									>
										{{ value.label }}
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<template v-if="formData.reasonRadio != null">
							<el-text class="mx-1" size="small">请选择具体原因</el-text>
							<el-col :span="24">
								<el-form-item label="" prop="concreteReasonRadio" required>
									<el-checkbox-group
										v-model="formData.concreteReasonRadio"
										v-for="value in options.reasonStatus"
									>
										<el-checkbox
											v-if="formData.reasonRadio === value.value"
											v-for="item in value.concrete"
											:key="item.value"
											:label="item.value"
											size="large"
											border
											style="margin-bottom: 10px"
											class="reason-checkbox"
											@change="
												handleConcreteReasonChange(item.value, item.label)
											"
										>
											{{ item.label }}
										</el-checkbox>
									</el-checkbox-group>
								</el-form-item>
							</el-col>
						</template>
						<!-- 标签区域 -->
						<el-col :span="24" class="mb-4">
							<el-text class="mx-1" size="small">已选择原因</el-text>
							<div>
								<el-tag
									type="primary"
									effect="plain"
									class="mr-2 mb-2"
									closable
									@close="removeTag(item)"
									v-for="item in concreteReasonLabel"
									size="large"
									>{{ item.label }}</el-tag
								>
							</div>
						</el-col>
						<el-col>
							<!-- 备注信息 -->
							<el-text class="mx-1" size="small">备注信息（选填）</el-text>
							<el-input
								v-model="formData.reasonRemark"
								:rows="3"
								type="textarea"
								placeholder="请详细描述您遇到的问题或需求"
							/>
						</el-col>
					</el-row>
				</template>

				<!-- 步骤3：确认提交 -->
				<template v-else-if="currentStep === 2">
					<el-divider content-position="left">确认信息</el-divider>
					<el-row>
						<el-col :span="24">
							<div class="confirm-section">
								<p class="confirm-item">
									<span class="confirm-label">服务类型:</span>
									<span class="confirm-value">{{
										formData.refundType === 1 ? '退货' : '换货'
									}}</span>
								</p>
								<p class="confirm-item">
									<span class="confirm-label">退换货原因:</span>
									<span class="confirm-value">{{ formData.reason }}</span>
								</p>
								<p class="confirm-item">
									<span class="confirm-label">订单号:</span>
									<span class="confirm-value">{{ orderData.order_no }}</span>
								</p>
								<p class="confirm-item">
									<span class="confirm-label">商品名称:</span>
									<!-- 眼镜品牌 眼镜型号 -->
									<span class="confirm-value"
										>{{ remarkObj.brand }} {{ remarkObj.model }}</span
									>
								</p>
								<p class="confirm-item">
									<span class="confirm-label">申请日期:</span>
									<span class="confirm-value">{{
										(() => {
											const date = new Date();
											const year = date.getFullYear();
											const month = String(date.getMonth() + 1).padStart(
												2,
												'0'
											);
											const day = String(date.getDate()).padStart(2, '0');
											return year + month + day;
										})()
									}}</span>
								</p>
								<p v-if="formData.proofImages.length > 0" class="confirm-item">
									<span class="confirm-label">上传凭证:</span>
									<span class="confirm-value"
										>{{
											formData.proofImages.length +
											formData.newProofImages.length
										}}
										张图片</span
									>
								</p>
							</div>
						</el-col>
						<el-col :span="24">
							<el-divider content-position="left">上传凭证照片</el-divider>
							<el-form-item label="" prop="proofImages" required>
								<cl-upload
									v-model="formData.proofImages"
									draggable
									multiple
									:before-upload="beforeUpload"
									:disabled="orderData.orderProcess != 2"
								/>
								<cl-upload
									v-model="formData.newProofImages"
									draggable
									multiple
									:before-upload="beforeUpload"
									v-if="orderData.orderProcess != 2"
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</template>

				<!-- 操作按钮 -->
				<div class="form-actions">
					<el-button @click="closeDialog">取消</el-button>
					<template v-if="currentStep > 0 && orderData.orderProcess == 2">
						<el-button @click="prevStep">上一步</el-button>
					</template>
					<template v-if="currentStep > 1 && orderData.orderProcess != 2">
						<el-button @click="prevStep">上一步</el-button>
					</template>
					<template v-if="currentStep < 2">
						<el-button type="primary" @click="nextStep">下一步</el-button>
					</template>
					<template v-if="currentStep === 2">
						<el-button type="primary" @click="submitForm" :disabled="submitBtnStatus"
							>提交申请</el-button
						>
					</template>
				</div>
			</el-form>
		</el-card>
	</cl-dialog>

	<!-- 申请成功弹窗 -->
	<el-dialog
		v-model="successDialogVisible"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
		custom-class="success-dialog"
	>
		<div class="success-content">
			<div class="success-icon">
				<el-icon><check /></el-icon>
			</div>
			<h3 class="success-title">提交成功</h3>
			<p class="success-message">您的退换货申请已提交成功，我们将尽快处理</p>

			<div class="success-info">
				<p class="info-item">
					<span class="info-label">退换货单号：</span>
					<span class="info-value">{{ refundNo }}</span>
				</p>
				<p class="info-item">
					<span class="info-label">预计处理时间：</span>
					<span class="info-value">1-3个工作日</span>
				</p>
			</div>

			<div class="success-actions">
				<el-button type="primary" @click="handleCompleteClick" class="w-full">
					完成
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, toRaw } from 'vue';
import { ElMessage, ElUpload } from 'element-plus';
import {
	Plus,
	RefreshRight,
	RefreshLeft,
	Check,
	Switch,
	Sort,
	Avatar
} from '@element-plus/icons-vue';
import { useCool } from '/@/cool';
import { useI18n } from 'vue-i18n';

const { service } = useCool();
const { t } = useI18n();
const visible = ref(false);
const emit = defineEmits(['closeDialog', 'update:modelValue']);
const formRef = ref(null);
const dialogVisible = ref(false);
const dialogImageUrl = ref('');
const submitBtnStatus = ref(true);

// 成功弹窗相关
const successDialogVisible = ref(false);
const refundNo = ref('');

const props = defineProps({
	orderId: {
		type: Number,
		default: 0
	},
	orderObj: {
		type: Object,
		default: () => ({})
	},
	modelValue: {
		type: Boolean,
		default: false
	}
});

const concreteReasonRadio = ref([]);

// 选项
const options = reactive({
	reasonStatus: [
		{
			label: '外观',
			value: 'Cosmetic',
			concrete: [
				{ label: '加硬点', value: 'HCDots' },
				{ label: '划伤', value: 'Scratches' },
				{ label: '镜片裂或崩', value: 'UncutLensBroken' },
				{ label: '杂质/尘点', value: 'Impurities/Dirts' },
				{ label: '镜片扭曲', value: 'IrregularLensShape' },
				{ label: '毛料不良', value: 'SFSV defect' }
			]
		},
		{
			label: '光学',
			value: 'Optics',
			concrete: [
				{ label: '错ADD', value: 'WrongADD' },
				{ label: '错线位', value: 'WrongAxis' },
				{ label: '度数错', value: 'WrongPower' },
				{ label: '棱镜错', value: 'WrongPrism' },
				{ label: '移心错', value: 'WrongDecentration' },
				{ label: '中心有点', value: 'CenterDot' },
				{ label: '厚度错', value: 'WrongThickness' },
				{ label: '面弯错', value: 'WrongBaseCurve' },
				{ label: '圆片大小错', value: 'WrongDiameter' }
			]
		},
		{
			label: '加硬加膜',
			value: 'Coating',
			concrete: [
				{ label: '泪痕', value: 'TearsPattern' },
				{ label: '脱膜', value: 'CoatPeeloff' },
				{ label: '彩虹膜', value: 'Rainbow' },
				{ label: 'R/L不对膜色', value: 'RLDifferentCoatColor' },
				{ label: '龟裂/裂膜', value: 'CoatCracks' },
				{ label: '浪纹', value: 'WavePattern' },
				{ label: '膜色错', value: 'WrongCoatColor' }
			]
		},
		{
			label: '客户',
			value: 'Customer',
			concrete: [
				{ label: '下错单', value: 'WrongOrder' },
				{ label: '改单', value: 'ChangeOrder' },
				{ label: '佩戴不适', value: 'WearDiscomfort' },
				{ label: '没写原因', value: 'ReasonNotWritten' },
				{ label: '超过一年', value: 'OverOneYear' }
			]
		},
		{
			label: '裁型',
			value: 'Edging',
			concrete: [
				{ label: '水平不对', value: 'WrongBalance' },
				{ label: '镜片崩', value: 'EdgedLensBroken' },
				{ label: '错PD', value: 'WrongPD' },
				{ label: '裁大/细', value: 'EdgedBigSmall' },
				{ label: '漏光', value: 'Window' },
				{ label: 'R/L裁反', value: 'RLReversed' },
				{ label: '错形状', value: 'WrongShape' },
				{ label: '镜片裂开', value: 'LensCracks' },
				{ label: '镜片松', value: 'LensLoose' },
				{ label: '吸盘印', value: 'SuctionCupShape' },
				{ label: '吸盘爆膜', value: 'SuctionCupCoatCracks' }
			]
		},
		{
			label: '材料及設計',
			value: 'MaterialandDesign',
			concrete: [
				{ label: '折射率错', value: 'WrongIndex' },
				{ label: '設計錯', value: 'WrongDesign' },
				{ label: '材料錯', value: 'WrongMaterial' }
			]
		},
		{
			label: '染色',
			value: 'Tinting',
			concrete: [
				{ label: '色不對板', value: 'DismatchSample' },
				{ label: 'R/L不對色', value: 'RLNotSame' }
			]
		},
		{
			label: '唛',
			value: 'Marking',
			concrete: [
				{ label: '太深', value: 'TooDeep' },
				{ label: '太浅', value: 'TooShallow' },
				{ label: '错唛', value: 'WrongMark' }
			]
		},
		{
			label: '客服',
			value: 'CS',
			concrete: [
				{ label: '下错单', value: 'OrderWrong' },
				{ label: '系统错', value: 'SystemError' }
			]
		}
	]
});

// 多选标签
const concreteReasonLabel = ref([]);

// 表单验证规则
const rules = reactive({
	refundType: [
		{
			required: true,
			message: '请选择退换货类型',
			trigger: 'change'
		}
	],
	reasonRadio: [
		{
			required: true,
			message: '请选择退换货原因',
			trigger: 'change'
		}
	],
	concreteReasonRadio: [
		{
			required: true,
			message: '请选择退换货具体原因',
			trigger: 'change',
			validator: (rule, value, callback) => {
				if (!value || value.length === 0) {
					callback(new Error('请选择退换货具体原因'));
				} else {
					callback();
				}
			}
		}
	],
	proofImages: [
		{
			required: true,
			message: '请选择退换货证据',
			trigger: 'change',
			validator: (rule, value, callback) => {
				if (!value || value.length === 0) {
					callback(new Error('请选择退换货证据'));
				} else {
					callback();
				}
			}
		}
	]
	// reason: [
	// 	{
	// 		required: true,
	// 		message: '请输入退换货原因',
	// 		trigger: 'blur'
	// 	},
	// 	{
	// 		min: 2,
	// 		max: 200,
	// 		message: '退换货原因长度在 2 到 200 个字符',
	// 		trigger: 'blur'
	// 	}
	// ],
	// description: [
	// 	{
	// 		max: 500,
	// 		message: '问题描述不能超过 500 个字符',
	// 		trigger: 'blur'
	// 	}
	// ]
});

// 当前步骤
const currentStep = ref(0);

// 表单数据
const formData = reactive({
	refundType: undefined, // 1: 退货, 2: 换货
	reasonRadio: null,
	reason: '', // 退换货原因
	concreteReasonRadio: [],
	description: '',
	proofImages: [],
	reasonRemark: '',
	newProofImages: []
});

// 订单数据
const orderData = reactive({
	contactName: '',
	contactPhone: '',
	receiveAddress: '',
	shopOrderTime: '',
	order_no: '',
	create_time: '',
	status: 0,
	status_text: '',
	kddh: '', //快递单号
	c_dial: '',
	c_diar: '',
	c_lball: '',
	c_rball: '',
	c_lpole: '',
	c_rpole: '',
	c_goods_l: '',
	c_goods_r: '',
	c_goods_l_desc: '',
	c_goods_r_desc: '',
	c_lnum: 1,
	c_rnum: 1,
	c_ladd: '',
	c_radd: '',
	c_lline: '',
	c_rline: '',
	c_is_process: 0,
	pd_r: 0,
	pd_l: 0,
	ph_r: 0,
	ph_l: 0,
	remark: '',
	c_process_type: '',
	c_coating_type: '',
	c_process_type_name: '',
	c_coating_type_name: '',
	orderProcess: null
});

const remarkObj = ref({
	// 配镜用户
	userName: '',
	// 品牌
	brand: '',
	// 眼镜型号
	model: '',
	// 镜框颜色
	frameColor: '',
	// 物流单号
	logisticsNo: '',
	// 备注字符串
	remark: ''
});

// 重置orderData的数据
function resetOrderData() {
	Object.assign(orderData, {
		contactName: '',
		contactPhone: '',
		receiveAddress: '',
		shopOrderTime: '',
		order_no: '',
		create_time: '',
		status: 0,
		status_text: '',
		kddh: '', //快递单号
		c_dial: '',
		c_diar: '',
		c_lball: '',
		c_rball: '',
		c_lpole: '',
		c_rpole: '',
		c_goods_l: '',
		c_goods_r: '',
		c_goods_l_desc: '',
		c_goods_r_desc: '',
		c_lnum: 1,
		c_rnum: 1,
		c_ladd: '',
		c_radd: '',
		c_lline: '',
		c_rline: '',
		c_is_process: 0,
		pd_r: 0,
		pd_l: 0,
		ph_r: 0,
		ph_l: 0,
		remark: '',
		c_process_type: '',
		c_coating_type: '',
		c_process_type_name: '',
		c_coating_type_name: ''
	});

	remarkObj.value = {
		brand: '',
		model: '',
		frameColor: '',
		logisticsNo: '',
		userName: '',
		remark: ''
	};
}

// 重置表单数据
function resetFormData() {
	formData.refundType = null;
	formData.reasonRadio = null;
	formData.concreteReasonRadio = [];
	formData.description = '';
	formData.proofImages = [];
	concreteReasonLabel.value = [];
	currentStep.value = 0;
	formData.reasonRemark = '';
}

// 获取退货单信息
async function getRefundDetail() {
	if (!props.orderId) {
		ElMessage.error('订单ID不能为空');
		return;
	}

	try {
		// 调用API获取退货单详情
		const res = await service.order.refund.getRefundInfoById({
			orderId: props.orderId
		});
		if (res) {
			formData.refundType = res.refundType;
			formData.proofImages = res.proofImages;
			formData.reason = res.refundReason;
			console.log(res);
			console.log(formData);
		} else {
			ElMessage.error('获取退货单详情失败');
		}
	} catch (error) {
		console.error('获取退货单详情失败:', error);
		ElMessage.error('获取退货单详情失败');
	}
}

// 获取订单详情
async function getOrderDetail() {
	// 重置数据
	resetOrderData();
	resetFormData();

	if (!props.orderId) {
		ElMessage.error('订单ID不能为空');
		return;
	}

	try {
		// 调用API获取订单详情
		const res = await service.order.order.info({
			id: props.orderId
		});

		if (res) {
			// 将数据赋值给orderData
			Object.assign(orderData, res.optometricsData);
			orderData.order_no = res.orderNo;
			orderData.shopOrderTime = res.shopOrderTime;
			orderData.orderProcess = res.orderProgress;
			console.log(res.GoodIds);
			const goodsRes = await service.order.order.getGoodsById({
				goodsId: res.GoodIds
			});

			// 根据remark拆分赋值给remarkObj
			if (orderData.remark) {
				const remarkParts = orderData.remark.split(',');

				remarkObj.value.userName = remarkParts[0];
				remarkObj.value.brand = goodsRes.goodsName;
				// remarkObj.value.model = remarkParts[2];
				// remarkObj.value.frameColor = remarkParts[3];
				// remarkObj.value.logisticsNo = remarkParts[4];
				// remarkObj.value.remark = remarkParts[5];
			}
			// 非第一次提交退换货，直接到第二步
			if (res.orderProgress != 2) {
				currentStep.value = 1;
			}
			// 退换货审核不通过
			if (res.orderProgress === -1) {
				getRefundDetail();
			}
		} else {
			ElMessage.error('获取订单详情失败');
		}
	} catch (error) {
		console.error('获取订单详情失败:', error);
		ElMessage.error('获取订单详情失败');
	}
}

// 切换退换货类型
function changeRefundType(type) {
	if (orderData.orderProcess != 2) {
		return;
	}
	formData.refundType = type;
}

// 下一步
function nextStep() {
	console.log(formData.refundType);
	if (currentStep.value === 0) {
		// 验证第一步
		formRef.value.validateField('refundType', valid => {
			if (valid) {
				currentStep.value++;
			} else {
				ElMessage.error('请选择退换货类型');
			}
		});
	} else if (currentStep.value === 1) {
		// 验证第二步
		formRef.value.validateField(['reasonRadio', 'concreteReasonRadio'], valid => {
			if (valid) {
				formData.reason = '';
				// // 检查是否选择了具体原因
				// if (!formData.concreteReasonRadio || formData.concreteReasonRadio.length === 0) {
				// 	ElMessage.error('请选择具体原因');
				// 	return;
				// }
				// 退换货原因
				for (let i = 0; i < concreteReasonLabel.value.length; i++) {
					formData.reason += concreteReasonLabel.value[i].label;
					if (i < concreteReasonLabel.value.length - 1) {
						formData.reason += ',';
					}
				}
				currentStep.value++;
			} else {
				// 使用验证规则中定义的错误消息
				ElMessage.error(rules.concreteReasonRadio[0].message);
			}
		});
	}
}

// 上一步
function prevStep() {
	if (currentStep.value > 0) {
		currentStep.value--;
	}
}

// 原因选择事件
function handleReasonChange(value) {
	concreteReasonRadio.value = value.concrete;
	console.log(concreteReasonRadio.value);
}

// 具体原因多选框选择事件
function handleConcreteReasonChange(value, label) {
	// 检查是否已选择该具体原因
	const index = toRaw(concreteReasonLabel.value).findIndex(item => item.value === value);
	console.log('查找索引:', index, '值:', value, '标签:', label);
	if (index > -1) {
		// 已选择，移除该值
		concreteReasonLabel.value.splice(index, 1);
	} else {
		// 未选择，添加该值
		concreteReasonLabel.value.push({ label: label, value: value });
	}
}

// 移除标签
function removeTag(item) {
	const index = concreteReasonLabel.value.findIndex(tag => tag.value === item.value);
	if (index > -1) {
		concreteReasonLabel.value.splice(index, 1);
	}
	const formIndex = formData.concreteReasonRadio.indexOf(item.value);
	if (formIndex > -1) {
		formData.concreteReasonRadio.splice(formIndex, 1);
	}
}

// 提交表单
async function submitForm() {
	if (!formRef.value) return;

	try {
		// 先进行表单验证
		const valid = await formRef.value.validate();
		if (!valid) {
			return;
		} else {
			console.log(formData);
		}

		// 验证通过后提交数据
		const res = await service.order.refund.submitRefundExchange({
			orderId: props.orderId,
			refundType: formData.refundType,
			reason: formData.reason,
			reasonRemark: formData.reasonRemark,
			proofImages: [...formData.proofImages, ...formData.newProofImages].map(
				item => item.url || item
			)
		});
		console.log(res);
		if (res) {
			// 显示申请成功弹窗
			successDialogVisible.value = true;
			// 设置申请单号（从响应中获取或生成）
			refundNo.value = res.refundNo;
		} else {
			ElMessage.error(res.message || '提交失败');
		}
	} catch (error) {
		console.error('提交退换货申请失败:', error);
		ElMessage.error(error);
	}
}

// 关闭弹窗
function closeDialog() {
	emit('closeDialog');
}

// 处理完成按钮点击
function handleCompleteClick() {
	successDialogVisible.value = false;

	// 延迟一小段时间再关闭主对话框，确保成功弹窗先关闭
	setTimeout(() => {
		closeDialog();
	}, 100);
}

// 图片预览

// 移除图片

// 图片上传前检查
function beforeUpload(file) {
	// 检查文件类型是否为图片
	const isImage = file.type.startsWith('image/');
	if (!isImage) {
		ElMessage.error('请上传图片类型文件!');
		return false;
	}
	// 检查文件大小是否超过2MB
	const isLt2M = file.size / 1024 / 1024 < 2;
	if (!isLt2M) {
		ElMessage.error('上传图片大小不能超过 2MB!');
		return false;
	}
	return true;
}

// 监听 modelValue 变化
watch(
	() => props.modelValue,
	val => {
		visible.value = val;
		if (val && props.orderId) {
			getOrderDetail();
		}
	}
);

// 监听 visible 变化
watch(
	() => visible.value,
	val => {
		emit('update:modelValue', val);
	}
);

// 监听 orderId 变化，重新获取订单详情
watch(
	() => props.orderId,
	newOrderId => {
		if (newOrderId && visible.value) {
			getOrderDetail();
		}
	}
);

// 监听表单数据变化，控制提交按钮状态
watch(
	formData,
	(newData, oldData) => {
		// 检查表单是否已填写完整
		// 至少需要选择退换货类型、主要原因和至少一个具体原因，以及上传了凭证图片
		if (currentStep.value === 2) {
			const isFormComplete =
				formData.refundType !== null &&
				formData.reasonRadio !== null &&
				formData.concreteReasonRadio.length > 0 &&
				formData.proofImages.length > 0;
			submitBtnStatus.value = !isFormComplete;
		} else {
			// 非最后一步时，按钮默认不可用
			submitBtnStatus.value = true;
		}
		console.log('表单数据变化:', newData, '提交按钮状态:', submitBtnStatus.value);
	},
	{ deep: true }
);
</script>

<style scoped>
/* 隐藏多选框的方框 */
:deep(.reason-checkbox .el-checkbox__inner) {
	display: none !important;
}
/* 移除多选框的边框样式 */
:deep(.reason-checkbox .el-checkbox) {
	border: none !important;
}
</style>
<style scoped>
/* 隐藏单选框前的圆圈 */
::v-deep .el-radio__input {
	display: none;
}

.tongkang-refund-exchange {
	padding: 20px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.steps-margin {
	margin-bottom: 30px;
}

/* 成功弹窗样式 */
.success-dialog {
	width: 400px;
}

.success-content {
	text-align: center;
	padding: 20px;
}

.success-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	background-color: #f0f9eb;
	border-radius: 50%;
}

.success-icon .el-icon {
	font-size: 40px;
	color: #67c23a;
}

.success-title {
	font-size: 20px;
	font-weight: 600;
	color: #303133;
	margin-bottom: 10px;
}

.success-message {
	font-size: 14px;
	color: #606266;
	margin-bottom: 20px;
}

.success-info {
	background-color: #f5f7fa;
	padding: 15px;
	border-radius: 4px;
	margin-bottom: 20px;
}

.info-item {
	font-size: 14px;
	color: #606266;
	margin: 5px 0;
	text-align: left;
}

.info-label {
	font-weight: 500;
}

.info-value {
	color: #303133;
}

.success-actions .el-button {
	font-size: 16px;
	padding: 10px 0;
}

.confirm-section {
	background-color: #f5f7fa;
	padding: 20px;
	border-radius: 4px;
	line-height: 1.8;
}

.confirm-item {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	margin: 0;
}

.confirm-label {
	color: #606266;
}

.confirm-value {
	color: #303133;
	text-align: right;
	flex: 1;
}

.refund-type-options {
	display: flex;
	gap: 20px;
}

.option-card {
	flex: 1;
	border: 2px solid #e4e7ed;
	border-radius: 8px;
	padding: 20px;
	cursor: pointer;
	transition: all 0.3s;
	position: relative;
	display: flex;
	align-items: flex-start;
}

.option-card:hover {
	border-color: #c0c4cc;
}

.option-selected {
	border-color: #409eff !important;
	background-color: #ecf5ff;
}

.option-icon {
	margin-right: 16px;
	position: relative;
}

.icon-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #f0f2f5;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #606266;
}

.option-selected .icon-circle {
	background-color: #409eff;
	color: white;
}

.check-mark {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #409eff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 12px;
}

.option-text h4 {
	margin: 0 0 8px 0;
	font-size: 16px;
	color: #303133;
}

.option-text p {
	margin: 0;
	font-size: 14px;
	color: #909399;
	line-height: 1.5;
}

.form-actions {
	margin-top: 30px;
	text-align: center;
}

.form-actions .el-button {
	margin: 0 10px;
}

.el-upload--picture-card {
	width: 100px;
	height: 100px;
}
</style>
